<template>
  <div class="filter-wrapper">
    <!-- 筛选按钮 -->
    <el-button type="primary" @click="toggleDrawer">
      筛选
      <!-- 动态显示生效筛选条数 -->
      <span v-if="activeFilterCount > 0" class="filter-count">{{ activeFilterCount }}</span>
      <i class="el-icon-arrow-right el-icon--right"></i>
    </el-button>

    <!-- 右侧抽屉 -->
    <el-drawer
        v-model="drawerVisible"
        title="筛选条件"
        size="30%"
        direction="rtl"
    custom-class="filter-drawer"
    >
    <!-- 抽屉表单内容 -->
    <el-form :model="filterModel" class="filter-form">
      <!-- 根据配置动态渲染筛选项 -->
      <div v-for="(filter, index) in filters" :key="index" class="filter-item">
        <el-form-item :label="filter.label" class="filter-item-label">
          <template v-if="filter.type === 'string'">
            <el-input v-model="filterModel[filter.field]" placeholder="请输入" size="small" />
          </template>
          <template v-else-if="filter.type === 'number'">
            <el-input-number v-model="filterModel[filter.field]" placeholder="请输入数字" size="small" />
          </template>
          <template v-else-if="filter.type === 'date'">
            <el-date-picker
                v-model="filterModel[filter.field]"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
            />
          </template>
          <template v-else-if="filter.type === 'enum'">
            <!-- 支持单选和多选标签筛选 -->
            <template v-if="filter.multiSelect">
              <el-checkbox-group v-model="filterModel[filter.field]">
                <el-checkbox
                    v-for="option in filter.options"
                    :key="option.value"
                    :label="option.value"
                >{{ option.label }}</el-checkbox>
              </el-checkbox-group>
            </template>
            <template v-else>
              <el-radio-group v-model="filterModel[filter.field]">
                <el-radio
                    v-for="option in filter.options"
                    :key="option.value"
                    :label="option.value"
                >{{ option.label }}</el-radio>
              </el-radio-group>
            </template>
          </template>
        </el-form-item>
      </div>
      <!-- 筛选和重置按钮 -->
      <div class="filter-buttons">
        <el-button type="primary" @click="applyFilter" size="small">筛选</el-button>
        <el-button @click="resetFilter" size="small">重置</el-button>
      </div>
    </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';

export default {
  name: 'DataFilter',
  props: {
    filters: {
      type: Array,
      required: true,
    },
    onFilterChange: {
      type: Function,
      required: true,
    },
  },
  setup(props) {
    const filterModel = ref({});
    const appliedFilters = ref({}); // 已生效的筛选条件
    const drawerVisible = ref(false); // 控制右侧抽屉显示和隐藏

    // 计算当前生效的筛选条数
    const activeFilterCount = computed(() => {
      return Object.keys(appliedFilters.value).filter(
          (key) => appliedFilters.value[key] !== '' && appliedFilters.value[key] !== null && appliedFilters.value[key] !== undefined
      ).length;
    });

    // 应用筛选条件（点击筛选按钮时生效）
    const applyFilter = () => {
      appliedFilters.value = { ...filterModel.value }; // 记录已生效的筛选条件
      const resultFilter = { ...appliedFilters.value };
      ElMessage({
        message: `当前筛选条件：${JSON.stringify(resultFilter)}`,
        type: 'success',
        duration: 3000,
      });
      props.onFilterChange(resultFilter);
      drawerVisible.value = false; // 关闭抽屉
    };

    // 重置筛选条件
    const resetFilter = () => {
      filterModel.value = {};
      appliedFilters.value = {};
      props.onFilterChange({});
    };

    // 控制抽屉显示和隐藏
    const toggleDrawer = () => {
      drawerVisible.value = !drawerVisible.value;
    };

    return {
      filterModel,
      appliedFilters,
      drawerVisible,
      activeFilterCount,
      applyFilter,
      resetFilter,
      toggleDrawer,
    };
  },
};
</script>

<style scoped>
/* 外层筛选按钮样式 */
.filter-wrapper {
  display: inline-block;
  margin: 4px 0;
}

/* 自定义抽屉样式 */
.filter-drawer {
  background-color: #ffffff; /* 白色背景 */
  box-shadow: none; /* 去除额外阴影 */
}

/* 优化下拉表单样式 */
.filter-form {
  padding: 16px;
  background-color: #ffffff; /* 白色背景 */
  border-radius: 8px;
  width: 100%;
}

.filter-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.filter-item-label {
  margin-right: 8px;
  font-weight: 500;
}

/* 控制表单元素宽度，防止溢出 */
.el-form-item {
  width: 100%; /* 确保表单项宽度不会超出容器 */
}

.filter-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* 动态圆圈样式 */
.filter-count {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  background-color: #ffffff; /* 红色背景 */
  color: #618af3;
  text-align: center;
  font-size: 12px;
  margin-left: 6px;
}
</style>
